<script lang="ts" name="airtrend">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import { SetUp } from "@element-plus/icons-vue";

const router = useRouter();
type EChartsOption = echarts.EChartsOption;

export default defineComponent({
  name: "airtrend",
  setup() {
    // 图表
    onMounted(() => {
      var chartDom = document.getElementById('main')!;
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;

      window.onresize = function () {
        myChart.resize();
      };

      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [
            { name: 'PM2.5', textStyle: { color: 'auto' }, },
            { name: 'PM10', textStyle: { color: 'auto' }, },
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022-07-28 00H', '2022-07-28 02H', '2022-07-28 04H', '2022-07-28 06H', '2022-07-28 08H', '']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'PM2.5',
            type: 'line',
            step: 'middle',
            data: [13.5, 10.8, 12.8, 10.6, 10.6, 10.6]
          },
          {
            name: 'PM10',
            type: 'line',
            step: 'middle',
            data: [0, 0, 0, 0, 0, 0]
          }
        ]
      };
      option && myChart.setOption(option);
      return {
        // EChartsOption,
        chartDom,
        myChart,
        option,
      }
    })



  }
})

</script>

<template>
  <div class="energy-flex" id="main" style="height: 100%;">
  </div>
</template>

<style  lang="scss" scoped>
</style>
